<template>
	<!-- title部分 -->
	<view class="title">
		<view class="title_leftbox" @click="goToIndex">
			<image class="title_leftbox_image_fanhui" src="../../static/返回.png"></image>
		</view>
		<view class="title_middlebox">
			<view class="title_middlebox_text">开奖直播</view>
		</view>
		<view class="title_rightbox">
			<image class="title_rightbox_img" src="../../static/zhuanfa.png" @click="showzhezhao"></image>
		</view>
	</view>

	<!-- tab部分 -->
	<view class="tabbox">
		<view class="tabbox_tabtextbox" v-for="(tab, index) in tabs" :key="index"
			:class="{ 'active': subCurrent === index }" @click="subChecked(index)">
			{{ tab }}
		</view>
	</view>
	<view v-if="subCurrent === 0">
		<!-- 视频部分 -->
		<view class="shipinbox">
			<view class="shipinbox_shipin">
				<view class="shipinbox_shipin_textbox">
					<view class="shipinbox_shipin_textbox_text1">距离开奖直播还有</view>
					<view class="shipinbox_shipin_textbox_box">

						<view class="shipinbox_shipin_textbox_box_text2">{{ countdown.a }}</view>
						<view class="shipinbox_shipin_textbox_box_text2">{{ countdown.b }}</view>
						<view class="shipinbox_shipin_textbox_box_text3">:</view>
						<view class="shipinbox_shipin_textbox_box_text2">{{ countdown.c }}</view>
						<view class="shipinbox_shipin_textbox_box_text2">{{ countdown.d }}</view>
						<view class="shipinbox_shipin_textbox_box_text3">:</view>
						<view class="shipinbox_shipin_textbox_box_text2">{{ countdown.e }}</view>
						<view class="shipinbox_shipin_textbox_box_text2">{{ countdown.f }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 开奖时间部分 -->
		<view class="kaijiangtimebox">
			<view class="kaijiangtimebox_kaijiang">
				<view class="kaijiangtimebox_kaijiang_imgtextbox">
					<image class="kaijiangtimebox_kaijiang_imgtextbox_img" src="../../static/congzuowangyou.png">
					</image>
					<view class="kaijiangtimebox_kaijiang_imgtextbox_text">今日体彩开奖时间</view>
					<image class="kaijiangtimebox_kaijiang_imgtextbox_img" src="../../static/congyouwangzuo.png">
					</image>
				</view>
			</view>
		</view>

		<!-- 开奖部分 -->
		<view class="kaijiangbox">
			<view class="kaijiangbox_kaijiang">
				<view class="kaijiangbox_kaijiang_textbox">
					<view class="kaijiangbox_kaijiang_textbox_text1">排列三</view>
					<view class="kaijiangbox_kaijiang_textbox_text2">21：25开奖</view>
				</view>

				<view class="kaijiangbox_kaijiang_textbox">
					<view class="kaijiangbox_kaijiang_textbox_text1">大乐透</view>
					<view class="kaijiangbox_kaijiang_textbox_text2">21：25开奖</view>
				</view>

				<view class="kaijiangbox_kaijiang_textbox">
					<view class="kaijiangbox_kaijiang_textbox_text1">排列五</view>
					<view class="kaijiangbox_kaijiang_textbox_text2">21：25开奖</view>
				</view>

				<view class="kaijiangbox_kaijiang_textbox">
					<view class="kaijiangbox_kaijiang_textbox_text1">七星彩</view>
					<view class="kaijiangbox_kaijiang_textbox_text2">今日不开奖</view>
				</view>
			</view>
		</view>
	</view>
	<view v-if="subCurrent === 1">福彩部分</view>
</template>

<script>
	export default {
		data() {
			return {
				subCurrent: 0, // 默认选中第一个子tab
				tabs: ['体彩', '福彩'],
				countdown: {
					a: '0',
					b: '0',
					c: '0',
					d: '0',
					e: '0',
					f: '0',
				},
				timer: null,
			};
		},
		mounted() {
			this.startCountdown();
		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
		methods: {
			goToIndex() {
				uni.switchTab({
					url: '/pages/index/index', // 首页路径
				});
			},
			subChecked(index) {
				this.subCurrent = index;
			},
			startCountdown() {
				const now = new Date();
				const targetTime = new Date();
				targetTime.setHours(21, 25, 0, 0); // 21:25:00.000

				const updateCountdown = () => {
					const timeLeft = targetTime - new Date();
					if (timeLeft <= 0) {
						clearInterval(this.timer);
						this.countdown = {
							a: '0',
							b: '0',
							c: '0',
							d: '0',
							e: '0',
							f: '0'
						};
						return;
					}

					const seconds = Math.floor((timeLeft / 1000) % 60);
					const minutes = Math.floor((timeLeft / 1000 / 60) % 60);
					const hours = Math.floor((timeLeft / 1000 / 60 / 60) % 24);

					this.countdown = {
						a: hours >= 10 ? hours.toString()[0] : '0',
						b: hours < 10 ? hours.toString()[0] : hours.toString()[1],
						c: minutes >= 10 ? minutes.toString()[0] : '0',
						d: minutes < 10 ? minutes.toString()[0] : minutes.toString()[1],
						e: seconds >= 10 ? seconds.toString()[0] : '0',
						f: seconds < 10 ? seconds.toString()[0] : seconds.toString()[1],
					};
				};

				this.timer = setInterval(updateCountdown, 1000);
			},
		},
	};
</script>


<style>
	page {
		background: #eeeeee;
	}

	/* 以下是title部分样式 */
	.title {
		background-color: rgb(226, 50, 52);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 2%;
	}

	.title_leftbox {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title_leftbox_image_fanhui {
		width: 24px;
		height: 24px;
	}

	.title_middlebox {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title_middlebox_text {
		font-size: 18px;
		color: white;
	}


	.title_rightbox {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title_rightbox_img {
		width: 18px;
		height: 18px;
	}

	/* tab部分 */
	.tabbox {
		padding: 2%;
		background: white;
		margin-bottom: 15px;
		display: flex;
	}

	.tabbox_tabtextbox {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
	}

	.tabbox_tabtextbox_text {
		font-size: 15px;
		flex: 1;
		text-align: center;
	}

	/* tab被选样式 */
	.active {
		position: relative;
		color: #E23234;
		font-weight: bold;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 23px;
		height: 3px;
		background-color: #E23234;
		left: 0;
		right: 0;
		margin: 0px auto;
		top: 24px;
		border-radius: 5px;
	}


	/* 视频部分 */
	.shipinbox {
		padding: 2%;
		background: black;
	}

	.shipinbox_shipin {
		padding: 0 2%;
	}

	.shipinbox_shipin_textbox {
		padding: 20%;
	}

	.shipinbox_shipin_textbox_text1 {
		font-size: 15px;
		color: white;
		text-align: center;
		margin-bottom: 7px;
	}

	.shipinbox_shipin_textbox_box {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shipinbox_shipin_textbox_box_text2 {
		font-size: 17px;
		color: black;
		padding: 2% 3%;
		background: white;
		margin: 0 1%;
		border-radius: 6px;
		font-weight: 900;
	}

	.shipinbox_shipin_textbox_box_text3 {
		font-size: 20px;
		color: white;
		font-weight: 900;
	}

	/* 开奖时间部分 */
	.kaijiangtimebox {}

	.kaijiangtimebox_kaijiang {
		padding: 6% 0%;
	}

	.kaijiangtimebox_kaijiang_imgtextbox {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.kaijiangtimebox_kaijiang_imgtextbox_img {
		width: 75px;
		height: 1px;
	}

	.kaijiangtimebox_kaijiang_imgtextbox_text {
		text-align: center;
		font-size: 18px;
		color: #f24444;
		font-weight: 600;
		padding: 0 1%;
	}



	/* 开奖部分 */
	.kaijiangbox {}

	.kaijiangbox_kaijiang {
		padding: 2%;
	}

	.kaijiangbox_kaijiang_textbox {
		display: flex;
		text-align: center;
		justify-content: center;
	}

	.kaijiangbox_kaijiang_textbox_text1 {
		font-size: 13px;
		padding: 5% 0%;
		display: flex;
		align-items: center;
		width: 36%;
		justify-content: center;
		color: #030303;
		background-color: #fafafa;
		border: 1px solid #f0f3f6;
		box-sizing: border-box;

	}

	.kaijiangbox_kaijiang_textbox_text2 {
		font-size: 13px;
		display: flex;
		align-items: center;
		width: 64%;
		justify-content: center;
		width: 64%;
		color: #ffa400;
		background-color: #fff;
		border: 1px solid #f0f3f6;
		box-sizing: border-box;
	}

	.kaijiangbox_kaijiang_textbox:first-child .kaijiangbox_kaijiang_textbox_text1 {
		border-top-left-radius: 12px;
	}

	.kaijiangbox_kaijiang_textbox:last-child .kaijiangbox_kaijiang_textbox_text1 {
		border-bottom-left-radius: 12px;
	}

	.kaijiangbox_kaijiang_textbox:first-child .kaijiangbox_kaijiang_textbox_text2 {
		border-top-right-radius: 12px;
	}

	.kaijiangbox_kaijiang_textbox:last-child .kaijiangbox_kaijiang_textbox_text2 {
		border-bottom-right-radius: 12px;
		color: #B1B1B1;
	}
</style>
